<div id="sidebar">
    <div id="sidebar-wrapper"> <!-- Sidebar with logo and menu -->
        <h1 id="sidebar-title"><a href="#">Simpla Admin</a></h1>
        <!-- Logo (221px wide) -->
        <a href="#"><img id="logo" src="/admin/images/logo.png" alt="Simpla Admin logo" /></a>

        <!-- Sidebar Profile links -->
        <div id="profile-links">
            Hello, <a href="#" title="Edit your profile"><% if(!(typeof(user)=="undefined")){ %><%= user.surname %><% } %></a>, you have <a href="#messages" rel="modal" title="3 Messages">3 Messages</a><br />
            <br />
            <a href="#" title="View the Site">View the Site</a> | <a href="#" title="Sign Out">Sign Out</a>
        </div>

        <ul id="main-nav" class="js_nav">  <!-- Accordion Menu -->

            <li>
                <a href="javascript:;" class="nav-top-item no-submenu"> <!-- Add the class "no-submenu" to menu items with no sub menu -->
                    Dashboard
                </a>
                <ul style="display:none">
                    <li data-id="index"></li></ul>
            </li>

            <li>
                <a href="#" class="nav-top-item">
                    Hotels
                </a>
                <ul>
                    <li data-id="hotel_add"><a href="/admin/hotel/add">Add a Hotel</a></li>
                    <li data-id="hotel_list"><a href="/admin/hotel/list">Hotel List</a></li>
                    <!--<li><a href="/admin/hotel/edit">Edit Hotel Information/Prices</a></li>-->
                    <!--<li><a href="/admin/hotel/list">Remove a Hotel</a></li>-->
                </ul>
            </li>
            <li>
                <a href="#" class="nav-top-item"> <!-- Add the class "current" to current menu item -->
                    Bookings
                </a>
                <ul>
                    <li data-id="book_add"><a href="/admin/book/add">Add Bookings</a></li>
                    <li data-id="book_list"><a href="/admin/book/list">Book list</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="nav-top-item">
                    View/Edit Comments
                </a>
                <ul>
                    <li><a href="#">View/Edit Comments</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="nav-top-item">
                    Users
                </a>
                <ul>
                    <li data-id="user_add"><a href="/admin/users/add">Add user</a></li>
                    <li data-id="user_list"><a href="/admin/users/list">User list</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="nav-top-item"> <!-- Add the class "current" to current menu item -->
                    Logout
                </a>
                <ul>
                    <li><a href="/admin/logout">Logout</a></li>
                </ul>
            </li>
        </ul> <!-- End #main-nav -->

        <div id="messages" style="display: none"> <!-- Messages are shown when a link with these attributes are clicked: href="#messages" rel="modal"  -->
            <h3>3 Messages</h3>
            <p>
                <strong>17th May 2009</strong> by Admin<br />
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue.
                <small><a href="#" class="remove-link" title="Remove message">Remove</a></small>
            </p>
            <p>
                <strong>2nd May 2009</strong> by Jane Doe<br />
                Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
                <small><a href="#" class="remove-link" title="Remove message">Remove</a></small>
            </p>
            <p>
                <strong>25th April 2009</strong> by Admin<br />
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue.
                <small><a href="#" class="remove-link" title="Remove message">Remove</a></small>
            </p>

            <form action="#" method="post">

                <h4>New Message</h4>

                <fieldset>
                    <textarea class="textarea" name="textfield" cols="79" rows="5"></textarea>
                </fieldset>

                <fieldset>
                    <select name="dropdown" class="small-input">
                        <option value="option1">Send to...</option>
                        <option value="option2">Everyone</option>
                        <option value="option3">Admin</option>
                        <option value="option4">Jane Doe</option>
                    </select>
                    <input class="button" type="submit" value="Send" />
                </fieldset>

            </form>
        </div> <!-- End #messages -->
    </div></div> <!-- End #sidebar -->
<script>
    requirejs(["jquery"],function(){
        //左侧菜单
       var sName =$("#js_current").val();
        $(".js_nav").find("li").each(function(){
             if(sName && $(this).attr("data-id") == sName){
                 $(this).parent().prev().toggleClass("current");
                 $(this).children().addClass("current");
                 $(this).parent().fadeIn();
             }else{
                 $(this).find("ul").hide();
             }
        });
        $(".js_nav li a.nav-top-item").on("click",function(){
            $(this).parent().siblings().find("ul").slideUp();
            $(this).next().slideToggle("normal");
            return false;
        });
        //鼠标效果
        $(".js_nav li .nav-top-item").hover(
                function () {
                    $(this).stop().animate({ paddingRight: "25px" }, 200);
                },
                function () {
                    $(this).stop().animate({ paddingRight: "15px" });
                }
        );
    });
</script>